import React, { useEffect } from 'react'
import { Button, Form, Input, Card, message } from 'antd';
// 编程式跳转路由
import { Navigate, useNavigate, useParams } from 'react-router-dom';

import style from '../index.module.css'
// axios请求的api
import { addHospitalRequest, getHosSetFromIdRequest, updateHosSetFromIdRequest } from "@/api/hospital/hospitalSet";
// axios请求参数的类型限制
import type { addHospitalParamType, updateHospitalParamType } from '@/api/hospital/model/hospitalSetTypes'

export default function AddOrUpdateHosSet() {
  const navigate = useNavigate()
  //通过Form组件上的一个useForm方法,可以创建实例,然后在某一个Form组件上添加一个form属性,值为当前实例,那么Form表单和当前的form实例就关联起来了
  const [from] = Form.useForm()
  // 路由跳转传递的params参数
  const { id } = useParams()
  // console.log(id, "id");


  useEffect(() => {
    //因为组件复用，在新增医院的时候不需要刚进入就发送请求,所以我们要判断当前是否有id
    if (id) {
      const getHosDetail = async () => {
        const result = await getHosSetFromIdRequest(id)
        //Form实例上有一个setFieldsValue方法,可以把一个对象的值通过key和表单的name一一对应的添加到表单里
        from.setFieldsValue(result)
      }
      getHosDetail()
    }
  })

  // 1新增医院的时间回调函数
  const addHosFinishHandle = async (fieldValue: addHospitalParamType) => {
    // 如果有id则修改没有则添加
    if (id) {
      await updateHosSetFromIdRequest({ ...fieldValue, id })
      //修改成功以后返回医院设置页面
      navigate("/syt/hospital/hospitalSet")
      message.success("修改数据成功")
    } else {
      //发送新增请求
      await addHospitalRequest(fieldValue)

      //新增成功以后返回医院设置页面
      navigate("/syt/hospital/hospitalSet")

      message.success("新增数据成功")
    }

  }

  // 2点击返回事件回调函数
  const goBackHandle = () => {
    navigate(-1)
  }
  return (
    <Card>
      <Form
        form={from}
        name="basic"
        labelCol={{ span: 3 }}
        wrapperCol={{ span: 18 }}
        onFinish={addHosFinishHandle}
      >
        <Form.Item
          label="医院名称"
          name="hosname"
          rules={[{
            //表单必填
            required: true,
            // 提示信息
            message: '请输入医院名称',
            // 将表单内容去除空格之后在校验
            transform(value) {
              return value.trim()
            }
          }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="医院编号"
          name="hoscode"
          rules={[{ required: true, message: '请输入医院编号' }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="api基础路径"
          name="apiUrl"
          rules={[{ required: true, message: '请输入api基础路径' }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="联系人姓名"
          name="contactsName"
          rules={[{ required: true, message: '请输入联系人姓名' }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="联系人手机"
          name="contactsPhone"
          rules={[{ required: true, message: '请输入联系人手机' }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          wrapperCol={{ offset: 3 }}
        >
          <Button type="primary" htmlType="submit" className={style.mr}>
            提交
          </Button>
          <Button type="default" htmlType="button" onClick={goBackHandle} >
            返回
          </Button>
        </Form.Item>
      </Form>
    </Card>
  );
}
